<script lang="ts" setup>
import { computed, getCurrentInstance, onMounted, reactive, ref } from 'vue'
import { appState, exitApp } from '../../../common/manager/appManager'
import ThemeSelect from './ThemeSelect.vue'
import UserMenu from './UserMenu.vue'
import { changeRouteExecute, routeConst } from '../../../router'

const state:any = reactive({
  popSetting: false,
  showHeaderIcon: false
})


const menuHandler = () => {
    appState.menuMini = !appState.menuMini
}

const backHome = () => {
  changeRouteExecute(routeConst.HOME_NAV, {}, true)
}

</script>

<template>
  <div class="header-view" :theme="appState.theme">
    <div class="top-nav">
      <div class="icon-box">
        <v-icon icon="liebiao"
                :title="appState.menuMini?'展开菜单':'收缩菜单'"
                class="icon-menu"
                button
                @click="menuHandler" />
      </div>
      <div class="center-controls" />
      <div class="top-right">
        <div class="icon-box">
          <v-icon icon="home2"
                  title="首页"
                  class="icon-menu"
                  button
                  @click="backHome" />
        </div>
        <theme-select v-if="!appState.themeDisabled" />
        <user-menu />
      </div>
    </div>
    <!--    <nav-page-menu />-->
  </div>
</template>

<style scoped lang="scss">
:deep(.el-badge__content.is-fixed){
  pointer-events: none!important;
}
.header-view[theme=dark]{
  box-shadow: 0px 1px 8px 0px rgba(0,0,0,0);
}
.header-view{
  @include abs-group(0,0,0,false);
  @include ver-group();
  height:var(--w-header-size);
  background: var(--w-header-bg);
  box-shadow: 0px 1px 8px 0px #eee;
  box-sizing: border-box;
  overflow: hidden;

  .top-nav{
    @include hor-group();
    padding: 0 20px;
    flex:auto;
    width:100%;
    height:100%;
    box-sizing: border-box;

    .icon-menu{
      font-size:20px;
    }


    .center-controls{
      @include hor-group(center);
      flex:auto;
      width:100%;
      overflow: hidden;
    }

    .top-right{
      @include hor-group(end) ;
      flex:none;
      height:100%;

      .date-box{
        flex:none;
        font-size:14px;
        color:var(--w-color-nor);
      }
      .msg-box{
        flex:none;
      }
      .top-icon{
        @include hor-group(center);
        font-size:20px;
        margin-left: 10px;
        width:28px;
        height:28px;
        outline: none!important;
      }
    }
  }

}

.icon-box{
  margin-right: 5px;
}

</style>
